<!DOCTYPE html>
<html lang="en">

<head>
    <title>测试管理系统</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="css/colorpicker.css" />
    <link rel="stylesheet" href="css/datepicker.css" />
    <link rel="stylesheet" href="css/uniform.css" />
    <link rel="stylesheet" href="css/matrix-style.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/matrix-media.css" />
    <link rel="stylesheet" href="css/bootstrap-wysihtml5.css" />
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
    <style type="text/css">
    body {
        overflow: auto;
    }
    </style>
</head>

<body>
    <!--close-left-menu-stats-sidebar-->
    <div id="form33_sty">
        <div class="form_33">
            <div class="form_sty">
                <ul>
                    <li>
                        <span>时间：</span>
                        <select name="" id="">
                            <option value="">全部</option>
                            <option value="">全部</option>
                            <option value="">全部</option>
                        </select>
                    </li>
                    <li>
                        <span>条件：</span>
                        <select name="" id="">
                            <option value="">全部</option>
                            <option value="">全部</option>
                            <option value="">全部</option>
                        </select>
                    </li>
                    <li>
                        <span>站点选择：</span>
                        <select name="" id="">
                            <option value="">全部</option>
                            <option value="">全部</option>
                            <option value="">全部</option>
                        </select>
                    </li>
                    <li>
                        <span>区域：</span>
                        <select name="" id="">
                            <option value="">全部</option>
                            <option value="">全部</option>
                            <option value="">全部</option>
                        </select>
                    </li>
                </ul>
                <div class="form_btn">
                    <input type="button" value="查询" class="search">
                    <input type="reset" value="重置" class="reset">
                </div>
            </div>
            <div class="form33_ifr">
                <div id="main" style="height:400px"></div>
                <!-- ECharts单文件引入 -->
                <script src="js/echarts.simple.min.js"></script>
                <script type="text/javascript">
                // 基于准备好的dom，初始化echarts图表
                var myChart = echarts.init(document.getElementById('main'), 'macarons');

                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
                    },

                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '直接访问',
                        type: 'bar',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    }, {
                        name: '邮件营销',
                        type: 'bar',
                        stack: '广告',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    }, {
                        name: '联盟广告',
                        type: 'bar',
                        stack: '广告',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    }, {
                        name: '视频广告',
                        type: 'bar',
                        stack: '广告',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    }, {
                        name: '搜索引擎',
                        type: 'bar',
                        data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                        markLine: {
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        type: 'dashed'
                                    }
                                }
                            },
                            data: [
                                [{
                                    type: 'min'
                                }, {
                                    type: 'max'
                                }]
                            ]
                        }
                    }, {
                        name: '百度',
                        type: 'bar',
                        barWidth: 5,
                        stack: '搜索引擎',
                        data: [620, 732, 701, 734, 1090, 1130, 1120]
                    }, {
                        name: '谷歌',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: [120, 132, 101, 134, 290, 230, 220]
                    }, {
                        name: '必应',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: [60, 72, 71, 74, 190, 130, 110]
                    }, {
                        name: '其他',
                        type: 'bar',
                        stack: '搜索引擎',
                        data: [62, 82, 91, 84, 109, 110, 120]
                    }]
                };

                // 为echarts对象加载数据 
                myChart.setOption(option);
                </script>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.ui.custom.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-colorpicker.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    <script src="js/jquery.toggle.buttons.html"></script>
    <script src="js/masked.js"></script>
    <script src="js/jquery.uniform.js"></script>
    <script src="js/matrix.js"></script>
    <script src="js/wysihtml5-0.3.0.js"></script>
    <script src="js/jquery.peity.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/matrix.tables.js"></script>
    <script src="js/matrix.form_common.js"></script>
    <script src="js/bootstrap-wysihtml5.js"></script>
    <script>
    $('.textarea_editor').wysihtml5();
    </script>
</body>

</html>
